<template>
<div class="myCitySelect">
    <div id="com1" class="selection-component">
        <div class="selection-show" @click="drop">
            <span>{{ hasData1 ? province[nowIndex].name : '' }}</span>
            <div class="arrow"></div>
        </div>
        <transition name="slide">
            <div class="selection-list" v-if="isDropCom1">
                <ul>
                    <li v-for="(item, index) in province" @click="selectedCom1(index)" :key="item.id">
                        {{ item.name }}
                    </li>
                </ul>
            </div>
        </transition>
    </div>
    <div id="com2" class="selection-component">
        <div class="selection-show" @click="isDropCom2 = !isDropCom2">
            <span>{{ hasData2 ? municipality[nowIndexCom2].name : '' }}</span>
            <div class="arrow"></div>
        </div>
        <transition name="slide">
            <div class="selection-list" v-if="isDropCom2">
                <ul>
                    <li v-for="(item, index) in municipality" @click="selectedCom2(index)" :key="item.id">
                        {{ item.name }}
                    </li>
                </ul>
            </div>
        </transition>
    </div>
    <div id="com3" class="selection-component">
        <div class="selection-show" @click="isDropCom3 = !isDropCom3">
            <span>{{ hasData3 ? county[nowIndexCom3].name : '' }}</span>
            <div class="arrow"></div>
        </div>
        <transition name="slide">
            <div class="selection-list" v-if="isDropCom3">
                <ul>
                    <li v-for="(item, index) in county" @click="selectedCom3(index)" :key="item.id">
                        {{ item.name }}
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
    data() {
        return {
            isDropCom1: false,
            isDropCom2: false,
            isDropCom3: false,
            nowIndex: 0,
            nowIndexCom2: 0,
            nowIndexCom3: 0,
            province: [
                
            ],
            municipality: [
                
            ],
            county: [
                
            ]
        }
    },
    created: function() {
        this.$http.get('/api/getcity').then((data) => {
            let allData = JSON.parse(data.bodyText).data
            this.province = allData
            this.municipality = allData[0].child
            this.county = allData[0].child[0].child
        }, (err) =>{
            console.log(err)
        });
    },
    computed: {
        hasData1 () {
            return this.province.length !== 0 ? true : false
        },
        hasData2 () {
            return this.municipality.length !== 0 ? true : false
        },
        hasData3 () {
            return this.county.length !== 0 ? true : false
        }
    },
    methods: {
        drop () {
            this.isDropCom1 = !this.isDropCom1
        },
        selectedCom1 (index) {
            this.nowIndex = index
            this.nowIndexCom3 = 0
            var municip = this.province[index].child
            this.nowIndexCom2 = 0
            if(municip.length !== 0) {
                this.municipality = municip
                if(municip[0].child.length !== 0) {
                    this.county = municip[0].child
                } else {
                    this.county = ''
                }
                this.isDropCom2 = false
                this.isDropCom3 = false
            } else {
                this.municipality = '';
            }
            this.isDropCom1 = false
            this.$emit('on-change', this.province[this.nowIndex].name || "", this.municipality[this.nowIndexCom2].name || "", this.county[this.nowIndexCom3].name || "")
        },
        selectedCom2 (index) {
            this.nowIndexCom2 = index
            this.nowIndexCom3 = 0
            var county = this.province[this.nowIndex].child[index].child
            if(county.length !== 0) {
                this.county = county
                this.isDropCom3 = false
            } else {
                this.county = ''
            }
            this.isDropCom2 = false
            // this.$emit('on-change', this.province[this.nowIndex].name, this.municipality[this.nowIndexCom2].name, this.county[this.nowIndexCom3].name)
            this.$emit('on-change', this.province[this.nowIndex].name || "", this.municipality[this.nowIndexCom2].name || "", this.county[this.nowIndexCom3].name || "")
        },
        selectedCom3 (index) {
            this.nowIndexCom3 = index
            this.isDropCom3 = false
            // this.$emit('on-change', this.province[this.nowIndex].name, this.municipality[this.nowIndexCom2].name, this.county[this.nowIndexCom3].name)
            this.$emit('on-change', this.province[this.nowIndex].name || "", this.municipality[this.nowIndexCom2].name || "", this.county[this.nowIndexCom3].name || "")
        }
    }
}
</script>
<style scoped>

.selection-component {
    position: relative;
    display: inline-block;
}

.selection-show {
    position: relative;
    border: 1px solid #e3e3e3;
    padding: 0 20px 0 10px;
    display: inline-block;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    border-radius: 3px;
    background-color: #fff;
    user-select: none;
}

.selection-show span {
    display: inline-block;
    width: 60px;
    text-align: center;
}

.selection-show .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #999;
    margin-top: -1px;
    margin-left: 6px;
    margin-right: -14px;
    vertical-align: middle;
}

.selection-list {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 25px;
    width: 100%;
    height: 200px;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    z-index: 5;
    user-select: none;
    overflow: auto;
}

.selection-list li {
    padding: 5px 15px 5px 10px;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.selection-list li + li {
    border-top: 1px solid #e3e3e3;
}

.selection-list li:hover {
    background: #e3e3e3;
}

.slide-enter-active,
.slide-leave-active {
    transition: all .3s ease-in;
}

.slide-enter,
.slide-leave-active {
    opacity: 0;
}
</style>
